import React, { Component } from 'react';
import menuList from '../../config/menuConfig';
import './index.less';
import { Menu } from 'antd';
import {NavLink} from 'react-router-dom';

const { SubMenu } = Menu;
export default class NavLeft extends Component {
    constructor(){
      super();
      const menuTreeNode = this.renderMenu(menuList);
      this.state = {menuTreeNode};
    }
    // 菜单渲染
    renderMenu = (data)=>{
      return data.map((item)=>{
        if(item.children){
            return (
                <SubMenu title={item.title} key={item.key}>
                    { this.renderMenu(item.children)}
                </SubMenu>
            )
        }
        return <Menu.Item title={item.title} key={item.key}>
            <NavLink to={item.key}>{item.title}</NavLink>
        </Menu.Item>
      })
    }
    render() {
        return (
            <div>
                <div className="logo">
                    <img src="/assets/logo-ant.svg" alt="logo"/>
                    <h1>Admin</h1>                  
                </div>
                <Menu theme="dark">
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }
}
